<template>
	<view class="safe-wapper">
		<view class="top-fixed">
			<u-navbar :fixed="false" :titleStyle="{ color: '#FFF' }" leftIconColor="#fff" bgColor="#3E8EF0"
				:autoBack="true" title="渡运安全全景"></u-navbar>
			<view class="tablist">
				<view class="tab" v-for="(item,index) in  tabList" :key="index" @click="changeTab(index)"
					:class="index===active ? 'active' :''">
					{{item.name}}
					<u-icon name="arrow-up-fill" color="#fff" size="10" v-if="index===active"></u-icon>
				</view>
			</view>
			<view class="top-bg">
				<view class="top-border"></view>
			</view>
			<view class="clearfix"></view>
			<view class="filter-con">
				<view class="calendar">
					<u-icon name="arrow-left" color="#323232" size="14" @click="changMonth(-1)"></u-icon>
					<view class="arrow" @click="openShow">
						<text>{{time}}</text>
						<u-icon name="arrow-down-fill" color="#323232" size="14"></u-icon>
					</view>
					<u-icon name="arrow-right" color="#323232" size="14" @click="changMonth(1)"></u-icon>
				</view>
			</view>
		</view>

		<view class="scroll">
			<view class="chart-con" :style="{marginTop:heightEle*2 +'rpx' }" v-if="showChart &&active===0">
				<view class="h10"></view>
				<view class="chart-tit">
					航次分布
				</view>
				<moreBarCharts :chartData="hangCiFenBu" v-if="hangCiFenBu"
					style="height: 560rpx; padding-bottom:30rpx" />
				<view class="h10 bg"></view>
				<view class="chart-tit">
					车辆数分布
				</view>
				<moreBarCharts :chartData="cheZaiShuFenBu" v-if="cheZaiShuFenBu"
					style="height: 560rpx; padding-bottom:30rpx" />
				<view class="h10 bg"></view>
				<view class="chart-tit">
					载重分布(单位：吨)
				</view>
				<moreBarCharts :chartData="zaiZhongFenBu" v-if="zaiZhongFenBu"
					style="height: 560rpx; padding-bottom:30rpx " />
			</view>
			<view class="chart-con" :style="{marginTop:heightEle*2 +'rpx' }" v-if="showChart &&active===1">
				<view class="h10"></view>
				<view class="chart-tit no-bottom">
					预警次数分析
				</view>
				<barCharts :chartData="yuJingCiShuFenXi" v-if="yuJingCiShuFenXi"
					style="height: 560rpx; padding-bottom:30rpx" />
				<view class="h10 bg"></view>
				<view class="chart-tit no-bottom">
					百航次预警次数分析
				</view>
				<barCharts :chartData="baiHangCiYuJingCiShuFenXi" v-if="baiHangCiYuJingCiShuFenXi"
					style="height: 560rpx; padding-bottom:40rpx" />

			</view>
		</view>
		<u-datetime-picker :formatter="formatter" v-if="showDate" :maxDate="maxDate" :show="showDate" v-model="newDate"
			mode="year-month" @cancel="cancel" @confirm="confirm">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		ferryNavigationStatistics,
		ferryWarningStatistics
	} from '@/api/report.js'
	import moreBarCharts from '../components/moreBarCharts.vue'
	import barCharts from '../components/barCharts.vue'
	import {
		moreBarChartData,
		barChartData
	} from '@/utils/index.js'
	export default {
		components: {
			moreBarCharts,
			barCharts
		},
		data() {
			return {
				tabList: [{
					name: '渡船航行分析'
				}, {
					name: '航行预警分析',
				}],
				newDate: Number(new Date()),
				active: 0,
				showDate: false,
				currentDate: '',
				time: '',
				maxDate: '',
				type: 2, //1:年度,2:月度,3:季度
				hangCiFenBu: null,
				cheZaiShuFenBu: null,
				zaiZhongFenBu: null,
				yuJingCiShuFenXi: null,
				baiHangCiYuJingCiShuFenXi: null,
				showChart: false,
				heightEle: 0,
				navHeight: uni.getStorageSync('navHeight') || 0,
			}
		},
		onLoad(option) {
			this.getNowFormatDate()
			this.getList()
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".top-fixed").boundingClientRect(data => {
				this.heightEle = Math.floor(data.height) 
			}).exec()
		},

		methods: {
			changMonth(num) {
				const {
					year,
					month
				} = this.getMonthYear(num)
				let months = month < 10 ? 0 + '' + month : month
				const getTime = year + '-' + months
				if (Number(new Date(getTime)) <= Number(new Date(this.currentDate))) {
					this.time = getTime
					this.getList()
				}
				// if (Number(year) < Number(currentYear) ) {
				// 	if(Number(month) <= Number(currentMonth)){}
				// 	let months = month < 10 ? 0 + '' + month : month
				// 	this.time = year + '-' + months
				// 	this.getList()
				// }
			},
			openShow() {
				this.newDate = Number(new Date(this.time))
				this.showDate = true
			},
			cancel() {
				this.newDate = ''
				this.showDate = false
				this.newDate = Number(new Date(this.time))
			},
			getMonthYear(num) {
				let month = Number(this.time.split('-')[1])
				let year = Number(this.time.split('-')[0])
				let year2 = year
				let month2 = month + num
				if (month + num <= 0) {
					// 之前年份
					year2 = year - 1 - parseInt(Math.abs(month2) / 12)
					month2 = 12 - (Math.abs(month2) % 12)
				} else if ((month2 / 12) > 1) {
					// 之后年份
					year2 = year + (month2 % 12 == 0 ? 0 : parseInt(month2 / 12))
					month2 = parseInt(month2 % 12) == 0 ? 12 : parseInt(month2 % 12)
				}
				return {
					year: year2,
					month: month2
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}

				return value;
			},

			getNowFormatDate() {
				let date = new Date(),
					seperator1 = '-', //格式分隔符
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
				if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
				this.currentDate = year + seperator1 + month
				this.time = this.currentDate
				// + seperator1 + strDate
				this.maxDate = new Date().getTime()
			},
			changeTab(index) {
				if (index !== this.active) {
					this.active = index
					this.getList()
					uni.pageScrollTo({
						duration: 0,
						scrollTop: 0
					})
				}
			},
			confirm(e) {
				console.log('confirm', e)
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm');
				this.time = timeValue;
				this.showDate = false
				this.showChart = false
				this.getList()
			},


			getList() {
				const params = {
					time: this.time,
					type: this.type
				}
				// uni.showLoading({
				// 	title: '加载中'
				// })
				this.showChart = false
				if (this.active === 0) {
					ferryNavigationStatistics(params).then(res => {
						const {
							hangCiFenBu,
							zaiZhongFenBu,
							cheZaiShuFenBu
						} = res.data
						this.hangCiFenBu = moreBarChartData(hangCiFenBu)
						this.zaiZhongFenBu = moreBarChartData(zaiZhongFenBu)
						this.cheZaiShuFenBu = moreBarChartData(cheZaiShuFenBu)
						this.showChart = true
					}).finally(() => {
						// uni.hideLoading()
					})
				} else {
					ferryWarningStatistics(params).then(res => {
						const {
							baiHangCiYuJingCiShuFenXi,
							yuJingCiShuFenXi
						} = res.data
						this.baiHangCiYuJingCiShuFenXi = barChartData(baiHangCiYuJingCiShuFenXi)
						this.yuJingCiShuFenXi = barChartData(yuJingCiShuFenXi)
						this.showChart = true
					}).finally(() => {
						uni.hideLoading()
					})
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.safe-wapper {
		width: 100vw;
		min-height: 100vh;

		.bg {
			background: #F5F7F9;
		}

		.h10 {
			height: 10rpx;
		}

		.top-fixed {
			top: 0;
			left: 0;
			width: 100vw;
			position: fixed;
			// height: 300rpx;
			background: #3E8EF0;
			z-index: 11;
		}



		/deep/ .u-navbar--fixed {
			background: #3E8EF0;
		}

		.tablist {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #3E8EF0;
			// margin-top: 90rpx;
			// padding-top: 126rpx;

			.tab {
				margin: 23rpx 65rpx;
				color: #95BCEB;
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				text-align: center;
				line-height: 48rpx;
				position: relative;

				/deep/.u-icon--right {
					position: absolute;
					width: 100%;
					display: flex;
					bpttom: 0;
					justify-content: center;
				}
			}

			.active {
				color: #fff;
			}
		}

		.top-bg {
			background: #3E8EF0;
		}

		.top-border {
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;
			position: relative;
			height: 20rpx;
			// margin-top: -4rpx;
		}

		.filter-con {
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #f5f5f5;

			.calendar {
				height: 56rpx;
				margin: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.arrow {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.columns {
				width: 170rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				border: 1rpx solid #C0C4CC;
				margin: 0 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #909399;
			}
		}

		.scroll {
			min-height: 90vh;
			background: #fff;
		}

		.chart-con {
			background:#fff;

			.chart-tit {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #323232;
				padding: 30rpx;

				&:first-child {
					border-top: none;
				}
			}

			.no-bottom {
				padding-bottom: 0 !important;
			}
		}
	}
</style>
